

import React, { useState, useRef } from "react";
import { Modal, Button } from "antd"

import FaceModalFooter from "./FaceModalFooter";

// TODO:配置项
const VIDEO_WIDTH = 500
const VIDEO_HEIGHT = 400

function FaceWrapper({ btnTitle = '人脸识别登录', btnLoading = false }) {
  const [showModal, setShowModal] = useState(false)
  const videoRef = useRef(null)
  const canvasRef = useRef(null)
  const canvasContext = useRef(null)
  // 用户上传/捕获的、要验证的图像数据
  const [loginFileName, setLoginFileName] = useState(null)

  // 是否摄像中
  const [isOnCamera, setIsOnCamera] = useState(false)

  // 显示modal
  let handleClick = () => {
    // 显示人脸识别的弹框
    setShowModal(true)
  }

  // 隐藏modal
  let hideModal = () => {
    setShowModal(false)
  }


  return (
    <>
      <Button className="face-btn" type="link" size='small' onClick={handleClick} loading={btnLoading}>
        {btnTitle}
      </Button>

      <Modal
        title='拍照上传'
        open={showModal}
        width={'80%'}
        footer={<FaceModalFooter isOnCamera={isOnCamera} loginFileName={loginFileName}></FaceModalFooter>}
        onCancel={hideModal}
      >
        <div className="canvas-box">
          <video ref={videoRef} id="videoCamera" className="canvas" width={VIDEO_WIDTH} height={VIDEO_HEIGHT} autoPlay></video>
          <canvas ref={canvasRef} className="canvas" width={VIDEO_WIDTH} height={VIDEO_HEIGHT}></canvas>
        </div >
      </Modal >
    </>
  )
}

export default React.memo(FaceWrapper)